<div class="login-bg"></div>
<form [formGroup]="loginForm" (ngSubmit)="doLoginSubmit(loginForm.value)">
    <div class="login-main">
        <div class="login-body">
            <div class="login-box">
                <span class="title">{{ 'login.title' | translate }}</span>
                <span class="desc">{{ 'login.description' | translate }}</span>
                <div>
                    <span class="ui-float-label">
                      <label for="login-name">{{ 'login.name' | translate }}</label>
                      <input pInputText id="login-name" type="text" size="20" formControlName="name" class="login-name"/>
                    </span>
                </div>
                <div>
                    <span class="ui-float-label">
                      <label for="login-pwd">{{ 'login.password' | translate }}</label>
                      <input pPassword id="login-pwd" type="password" [feedback]="false"
                             formControlName="password" class="login-pwd"/>
                    </span>
                </div>
                <button pButton type="submit" class="login-button" label="{{ 'login.button' | translate }}"
                        [disabled]="!loginForm.valid"></button>
                <button pButton type="button" class="register-button" label="{{ 'login.register.button' | translate }}"
                        (click)="showRegisterDialog()"></button>
            </div>
        </div>
        <div class="login-footer">Copyright © {{ year }} richie696 All rights reserved.</div>
    </div>
</form>


<p-dialog header="{{ 'login.register.title' | translate }}" [(visible)]="displayRegisterModal" [modal]="true" [style]="{width: '30vw'}" [baseZIndex]="10000"
          [draggable]="false" [resizable]="false">
    <form [formGroup]="registerForm" (submit)="doRegisterSubmit(registerForm.value)" >
        <div class="p-grid p-fluid">
            <div class="p-field p-col-12 p-md-4">
                <div class="p-inputgroup">
                    <span class="p-inputgroup-addon"><i class="pi pi-user"></i></span>
                    <input type="text" formControlName="loginName" pInputText placeholder="{{ 'login.name' | translate }}">
                </div>
            </div>
            <div class="p-field p-col-12 p-md-4">
                <div class="p-inputgroup">
                    <span class="p-inputgroup-addon"><i class="pi pi-lock"></i></span>
                    <input pPassword type="password" formControlName="loginPassword"
                           placeholder="{{ 'manage.password.new.password' | translate }}"
                           promptLabel="{{ 'manage.password.new.pwd.label' | translate }}"
                           weakLabel="{{ 'commons.pwd.weak' | translate }}"
                           mediumLabel="{{ 'commons.pwd.medium' | translate }}"
                           strongLabel="{{ 'commons.pwd.strong' | translate }}">
                    <span class="p-inputgroup-addon"><i class="pi pi-lock"></i></span>
                    <input pPassword type="password" formControlName="surePassword"
                           placeholder="{{ 'manage.password.confirm.password' | translate }}"
                           promptLabel="{{ 'manage.password.confirm.pwd.label' | translate }}"
                           weakLabel="{{ 'commons.pwd.weak' | translate }}"
                           mediumLabel="{{ 'commons.pwd.medium' | translate }}"
                           strongLabel="{{ 'commons.pwd.strong' | translate }}">
                </div>
            </div>
            <div class="p-field p-col-12 p-md-4">
                <div class="p-inputgroup">
                    <span class="p-inputgroup-addon"><i class="pi pi-user"></i></span>
                    <input type="text" pInputText formControlName="userName" placeholder="{{ 'login.register.user.name' | translate }}">
                </div>
            </div>
            <div class="p-field p-col-12 p-md-4">
                <div class="p-inputgroup">
                    <span class="p-inputgroup-addon"><i class="pi pi-envelope"></i></span>
                    <input type="email" pInputText formControlName="email" placeholder="{{ 'login.register.email' | translate }}">
                    <p-button label="{{ 'login.register.send.code' | translate }}" [style]="{width: '110px'}" [disabled]="disableSendBtn || disableSendCode()" (click)="doSendCode($event)"></p-button>
                </div>
            </div>
            <div class="p-field p-col-12 p-md-4">
                <div class="p-inputgroup">
                    <span class="p-inputgroup-addon"><i class="pi pi-key"></i></span>
                    <input type="text" maxlength="6" pInputText formControlName="captcha" placeholder="{{ 'login.register.code' | translate }}">
                </div>
            </div>
            <div class="ui-g-12">
                <p-button type="submit" class="register-button"
                          [disabled]="!registerForm.valid"
                          label="{{ 'login.register.button' | translate }}"></p-button>
            </div>
        </div>
    </form>
    <ng-template pTemplate="footer">
               <p-button (click)="displayRegisterModal=false" label="{{ 'commons.close' | translate }}" styleClass="p-button-text"></p-button>
    </ng-template>
    <p-confirmDialog header="{{ 'commons.success' | translate }}" icon="pi pi-exclamation-triangle"></p-confirmDialog>
</p-dialog>
